<template>
    <div class="bar" id="bar" :style="{height:400+'px',width:100+'%'}">

    </div>
</template>

<script setup  lang="ts">
import * as echarts from 'echarts';
import { onMounted,watch ,ref} from 'vue'
let echartDom:any = ref('')
 // 接收一个父组件给的数据
let props:any =   defineProps({
    echartsList:{
        type:Object
    }
 })
 watch(()=>props,(newVal:any)=>{
      console.log(newVal.echartsList,11111111);
      //创建 画 图表
      getEchartT(newVal.echartsList)

 },{
    deep:true
 })

 //配置图表
 const  getEchartT = (obj:any)=>{
    // var myChart = echarts.init(document.getElementById('bar'));
    // console.log(props.echartsList.xdata,'父组件给子组件的，异步数据');
    
   //echart 属性
    let option = {
        xAxis: {  //x
            type: 'category',
            data: obj.xdata
        },
        yAxis: { 
            type: 'value',
            splitLine:{
    show:true,
    lineStyle:{
        type:'dashed'
    }
}
        },
        series: [
            {
                data: obj.list,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };

    echartDom.value.setOption(option)
 }

onMounted(() => { //组件的生命周期 =》组件创建执行一次
    let dom = document.getElementById('bar')
    if(dom){
        echartDom.value =   echarts.init(dom);
    }
   
})



// 总结  项目中的echarts   二次封装

//  1创建一个单独的文件， 初始化一项echart 实例对象
//  2因为我们在工作中，这个可视化图表都是动态的数据，我有进行封装，通过watch  获取到异步数据
//  在触发echarts 配置图表的方法（ 
/*
    1）：因为我写项目都是组件化开发，方便后期的复用和维护， =>组件渲染关系，和数据获取的顺序
     
组件渲染关系 =》先渲染父子关系， 如果这个子组件的数据是异步，我需要在逻辑 获取到这个异步数据，通过watch

  =》watch  时时更新  echarts 图表配置方法

**/
// ）


// 3 怎么处理样式 =》ui给你的可视化图表， 
     //1先到  echarts 图表中 案例 =》（80%）

     // 2 百度查找



</script>

<style>

</style>